<!--大数据展示-->
<template>
    <div style="padding: 10px;">
<!--        <div style="width:500px;height:500px;margin: 50px auto;" ref="chart" ></div>-->
        <div style="width:600px;height:600px;margin: 10px auto;" ref="chart" ></div>
    </div>
</template>
<script>
    import request from "../utils/request";

    const echarts = require('echarts');

    export default{
        data () {
            return {
                search: '',
                currentPage: 1,
                pageSize: 5,
                total: 0,
                tableData: [],
                data1: ["阿里巴巴","华为","牛客网","小米","猿辅导"],
                data2: [6, 7, 9, 43, 352],
            };
        },
        created() {
            console.log("created")
        },
        methods: {
            initCharts () {
                let myChart = echarts.init(this.$refs.chart);
                request.get("/exerciseRank",{ // 请求/exerciseRank接口
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res=>{
                    // console.log(res)
                    // 将请求得到的数据赋值给data1、data2
                    for (var i=0;i<res.data.records.length;i++)
                    {
                        this.data1[i]=res.data.records[i]['company']
                        this.data2[i]=res.data.records[i]['exerciseNum']
                    }
                    // 绘制图表
                    myChart.setOption({
                        title: { text: '真题热练榜【技术（软件）/信息技术类】' ,
                                subtext: '数据来自牛客网',},
                        tooltip: {},
                        toolbox: {  // 显示保存图片的按钮
                            show: true,
                            orient: 'horizontal',
                            bottom: 10,
                            right: 20,
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            top: 100,
                        },
                        xAxis: {
                            data: this.data1
                        },
                        yAxis: {},
                        series: [{
                            name: '练习量',
                            type: 'bar',
                            data: this.data2,
                            itemStyle:{
                                color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#248ff7'
                                }, {
                                    offset: 1,
                                    color: 'rgba(22,75,247,0.1)'
                                }]),
                            }
                        }]
                    });
                })
            },

        },
        mounted () {
            this.initCharts();
            console.log("mounted")
        }
    }
</script>

<style scoped>

</style>